import React, {useState} from 'react';
import logo from './logo.svg';
import {
  BrowserRouter as Router,
  Switch,
  Route,
Link
} from "react-router-dom";
import { Layout, Menu } from 'antd';
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined,
  VideoCameraOutlined,
} from '@ant-design/icons';

import TodoContainer from './TodoContainer'
import UserProfile from './UserProfile'
import 'antd/dist/antd.css';
import './App.css';
import './layout.css'

const { Header, Sider, Content } = Layout;

function App() {
  const [collapsed, setCollapse] = useState(false)
  const [navKey, setNavKey] = useState('home')
  function handleToggle() {
setCollapse(!collapsed)
  }
  const handleNavigate = (ev) => {
setNavKey(ev.key)
  }
  return (
            <Router>
              <Switch>
    <Layout>
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className="logo" />
        <Menu theme="dark" mode="inline" selectedKeys={[navKey]} onClick={handleNavigate}>
          <Menu.Item key="home" icon={<UserOutlined />}>
            <Link to="/" />Home
          </Menu.Item>
          <Menu.Item key="todo" icon={<VideoCameraOutlined />}>
           <Link to="/todo" />Todo List 
          </Menu.Item>
          <Menu.Item key="user1" icon={<UserOutlined />}>
            <Link to="/user/1" />User1
          </Menu.Item>
          <Menu.Item key="user2" icon={<UserOutlined />}>
            <Link to="/user/2" />User2
          </Menu.Item>
        </Menu>
      </Sider>
      <Layout className="site-layout">
        <Header className="site-layout-background" style={{ padding: 0 }}>
          {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
            className: 'trigger',
            onClick: handleToggle,
          })}
        </Header>
        <Content
        className="site-layout-background"
        style={{
          margin: '24px 16px',
          padding: 24,
          minHeight: 280,
        }}
      >
          <div className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
                <Route exact path="/">
                  <TodoContainer />
                </Route>
                <Route path="/todo">
                  <TodoContainer />
                </Route>
                <Route path="/user/:userid">
                  <UserProfile />
                </Route>
          </div>
        </Content>
      </Layout>
    </Layout>
              </Switch>
            </Router>
  );
}

export default App;

